<template>
  <div class="container">
  <div class="pagehead">
    <div class="left"><h2>简介</h2></div>
    <div class="right"><el-button  type="primary" @click="toedit" :disabled="isedit" ><el-icon><i-ep-Edit /></el-icon>编辑</el-button></div>
  </div>
    <el-form  class="userinfo-form" label-width="150" ref="userinfoRef"  :model="userForm">
      <el-form-item  prop='avatar'>
        <img :src="userinfo?.avatar || `../assets/svip.svg`" style="with:200px; height: 200px; object-fit: cover;" >
      </el-form-item>
      <el-form-item label="用户名" prop='username'>
        <el-input :readonly="!isedit" v-model="userForm.username"  />
      </el-form-item>
      <el-form-item label="年龄" prop='age'>
        <el-input :readonly="!isedit" v-model.number="userForm.age" />
      </el-form-item>
      <el-form-item label="性别" prop='sex'>
        <el-select
          v-model="userForm.sex"
          placeholder="请选择"
          style="width: 240px"
          :disabled="!isedit"
        >
          <el-option label="男" value="男"/>
          <el-option label="女" value="女"/>
        </el-select>
      </el-form-item>
      <el-form-item label="密码" prop='password'>
        <el-input :readonly="!isedit" v-model="userForm.password" show-password />
      </el-form-item>
      <el-form-item label="手机号" prop='phone'>
        <el-input :readonly="!isedit" v-model="userForm.phone"  />
      </el-form-item>
      <el-form-item label="简介" prop='desc'>
        <el-input :readonly="!isedit" v-model="userForm.desc"  maxlength="200" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="请输入" show-word-limit type="textarea" />
      </el-form-item>
      <div style="marginTop:5px; padding: 10px 0;">
        <el-button v-if="isedit" type="primary" @click="handlesubmit(userinfoRef)" >提交</el-button>
        <el-button v-if="isedit" type="default" @click="isedit = false" >取消</el-button>
      </div>
    </el-form>
  </div>
</template>


<script setup>
import { onMounted, reactive, ref } from "vue";
import { updateuser } from "../apis/user"
const userForm = reactive({
  username: '',
  age: '',
  sex: '',
  password: '',
  phone: '',
  desc: ''
})
onMounted(()=>{
  getuserinfo()
})
const userinfoRef = ref()
let userinfo = ref(null)
const getuserinfo = ()=>{
  userinfo.value = JSON.parse(localStorage.getItem('cms_userinfo'))
  console.log(userinfo.value, 'vlaus');
  userForm.username = userinfo.value.username
  userForm.age = userinfo.value.age
  userForm.sex = userinfo.value.sex
  userForm.password = userinfo.value.password
  userForm.phone = userinfo.value.phone
  userForm.desc = userinfo.value.desc
  userForm.id = userinfo.value._id
}
let isedit = ref(false)
const toedit = ()=>{
  console.log('点击了编辑');
  isedit.value = true
}
const handlesubmit = (userinfoRef) =>{
  userinfoRef.validate(valid =>{
    if (valid) {
      let params = {
        ...userForm
      }
      console.log(params, 'params');
      updateuser(params).then(res=>{
        console.log(res, '成功')
        if (res.data.isok) {
          ElNotification({
            title: 'Success',
            message: '更新成功',
            type: 'success',
          })
        }
      }).catch(err=>{
        console.log('失败', err)
      })
      isedit.value = false
    } else {
      console.log('校验失败')
    }
  })
}
</script>


<style lang="less" scoped>
.container{
  padding: 20px;
  background-color: #fff;
  .pagehead{
    display: flex;
    justify-content: space-between;
    padding-bottom: 20px;
  }
  .userinfo-form{
    width: 40vw;
    margin: 0 auto;
    text-align: center;
    border: 1px solid #aaa;
  }
}
</style>